<template>
  <div class="dm" :style="{height:pageHeight+'px'}">
    <div class="dm-left" :style="{width:leftWidth+'px'}" v-loading="dataRowsLoading">
      <span class="coc-tree-actions">
        <span>
          <a-input-search v-model="queryParams.keywords" allowClear
                          placeholder="关键字检索"
                          style="margin: 8px 10px;width: 150px;"
                          @search="doSearch"/>
        </span>
      </span>
      <span>
        <a-button-group v-if="showCheckbox">
          <a-button icon="undo" @click.stop="doUncheck" title="取消多选" />
          <a-button :disabled="getCheckedKeys().length==0" icon="delete"  @click="doDelete()" title="删除选中的数据" />
        </a-button-group>
        <a-button-group v-else>
          <a-button icon="check-circle" @click.stop="showCheckbox=true" title="多选：批量删除" />
          <a-dropdown :trigger="['click']">
            <a-button icon="plus-circle" @click.stop="doAdd()" />
            <a-menu slot="overlay">
              <a-menu-item key="cCorp" @click="doAdd(null, 'corp')">
                添加公司
              </a-menu-item>
              <a-menu-item key="cDept" @click="doAdd(null, 'dept')">
                添加部门
              </a-menu-item>
              <a-menu-item key="cGroup" @click="doAdd(null, 'group')">
                添加分组
              </a-menu-item>
              <a-menu-item key="cGov" @click="doAdd(null, 'gov')">
                添加政府机关
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a-button-group>
      </span>
      <div class="dm-left-data" :style="{height:pageHeight-50+'px'}">
        <Tree ref="tree" :data="dataRows" node-key="key" empty-text="暂无数据" draggable highlight-current
              :expand-on-click-node="false" :default-expanded-keys="expandedKeys"
              :show-checkbox="showCheckbox" :check-on-click-node="showCheckbox" check-strictly
              @node-drop="doDrop" @node-click="doSelect" @node-expand="doExpand" @node-collapse="doCollapse"
        >
          <span class="coc-tree-node" slot-scope="{ node, data }">
            <span>
              <a-icon v-if="data.type=='corp'" slot="corpIcon" type="home" />
              <a-icon v-if="data.type=='dept'" slot="deptIcon" type="apartment" />
              <a-icon v-if="data.type=='group'" slot="groupIcon" type="cluster" />
              <a-icon v-if="data.type=='gov'" slot="groupIcon" type="bank" />
              {{ node.label }}
            </span>
            <span class="btns">
              <a-dropdown :trigger="['click']">
                <a-button icon="plus" size="small" @click.stop="doAdd(data)" />
                <a-menu slot="overlay">
                  <a-menu-item key="cCorp" @click="doAdd(data, 'corp')">
                    添加公司
                  </a-menu-item>
                  <a-menu-item key="cDept" @click="doAdd(data, 'dept')">
                    添加部门
                  </a-menu-item>
                  <a-menu-item key="cGroup" @click="doAdd(data, 'group')">
                    添加分组
                  </a-menu-item>
                  <a-menu-item key="cGov" @click="doAdd(data, 'gov')">
                    添加政府机关
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </span>
          </span>
        </Tree>
      </div>
    </div>
    <div class="dm-right" :style="{width:rightWidth+'px'}">
      <component :is="formView" :pageParams="formParams" :pageHeight="pageHeight" :pageWidth="rightWidth" @onSuccess="doFormSuccess" @onClose="doFormClose" />
    </div>
  </div>
</template>
<script>
import DataTreeUtils from '@/utils/DataTreeUtils'

import EditGovForm from './editGov.vue'
import EditCorpForm from './editCorp.vue'
import EditDeptForm from './editDept.vue'
import EditGroupForm from './editGroup.vue'

export default {
  mixins: [DataTreeUtils],
  data() {
    return {
      dataRowsQueryUrl: '/jsofted/org/tree',
      dataRowsDeleteUrl: '/jsofted/org/delete/',
      dataRowsUpdateUrl: '/jsofted/org/update/',
      dataRowsSortUrl: '/jsofted/org/sort',
      formView: EditCorpForm,
    }
  },
  methods: {
    _setFormView(type) {
      switch (type) {
      case 'gov':
        this.formView = EditGovForm
        break
      case 'corp':
        this.formView = EditCorpForm
        break
      case 'dept':
        this.formView = EditDeptForm
        break
      case 'group':
        this.formView = EditGroupForm
        break
      }
    },
    _doSelect(node) {
      if (node) {
        this.formParams = {id: node.id}
        this._setFormView(node.type)
      } else {
        this.formParams = {}
        this.formView = EditCorpForm
      }
    },
    doAdd(parentData, type) {
      if (type) {
        this._setFormView(type)
        this._doAdd(parentData)
      }
      this.currentNodeKey = parentData ? parentData.key : null
      this.$refs.tree.setCurrentKey(this.currentNodeKey)
    },
  }
}
</script>
